PCPhoto
Build Your Own Web GalleryA step-by-step guide with screenshots for building your first website |
|
|
|
Page 8 of 25
STEP 5b: Code Orientation 101
Here is the new basic HTML page in Dreamweaver. All of the code you see was automatically inserted by Dreamweaver. You can copy it if you’re working in a plain-text editor. Let’s look at it a little bit to get the lay of the land. The first line of the code is <!DOCTYPE ...>. This line is a declaration to your web browser about the document’s type and contents. The second line <html ...> is a similar declaration for the browser. You can pretty much ignore these two lines. Before we go any further, you need to know the concept of a tag. Tags denote the beginning and end of little modules or building blocks that make up the page. When you “open” a tag, you must also “close” it, and the syntax is almost always <tag> </tag>. The code <tag> opens it, and the code </tag> closes it. You place your content for that module in between the opening and closing tags. In general, once a tag is opened, it must be closed. There are self-closing tags and other exceptions, but we don’t need to worry about them right now. Okay, so let’s look at line 3 of the code. This is the opening of the <head> tag. Everything contained between <head> and </head> on line 6 is the header of the document, and it contains more information about the page and its contents. Nothing in the header is rendered visually on the page. This is the section where you can add “meta” or metadata tags for your site description, keywords for search engines and the page title. To learn more about meta tags, you can Google-search “meta tags” and find tons of info on how to add keywords and more to your pages. Note that meta tags are of the self-closing variety previously mentioned—there’s no </meta> tag on line 4. Of greatest importance to us in the header section is the <title>. This is where you enter the text that will appear at the top of the browser window. I’m going to change the text between the <title> and </title> tags to “Build Your Own Website | PCPhoto Magazine”. Line 6 has the </head> tag, which closes the header section. On line 8, you see the <body> tag. Everything contained between <body> and </body> is what makes up the content you see on the web page. Between these tags, we’ll be working in the following steps. After the </body> tag, you see the </html> tag on line 10. This tag signifies the end of the document for the browser. Nothing should be placed after the </html> tag.   |
|||||
